<%@ include file="../shared/standardDirectives.jspf" %>
<style type="text/css">
      body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 400px;
        width: 600px;
        margin-top: 0.6em;
      }
    </style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript" ></script>
<script>
	function initialize(){
		var input = document.getElementById('searchTextField');
		var autocomplete = new google.maps.places.Autocomplete(input);
		
	}
	function callback(results, status) {
		if (status == google.maps.places.PlacesServiceStatus.OK) {
			for (var i = 0; i < results.length; i++) {
		  		var place = results[i];
		  		alert(results[i]); 
			}
		}
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="demo" id="tabs-3">
	<html:form action="/route/search.do">
		<table  border="1">
			<thead>
				<tr>
					<th align="left">Plan Your Journey</th>
					<th align="left">Search Result</th>
					<th align="left">Route Map</th>
				</tr>
			</thead>
			<tr valign="top">
				<td>
					<table  border="0">
						<tbody>
							<tr>
								<th align="right">From:</th>
								<td>
									<html:hidden name="searchRouteForm" property="from" styleId="from"/>
									<html:text name="searchRouteForm" property="fromStr" styleId="fromStr" />
								</td>
								<td>
									<html:select property="originType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<th align="right">To:</th>
								<td>
									<html:hidden name="searchRouteForm" property="to" styleId="to"/>
									<html:text name="searchRouteForm" property="toStr" styleId="toStr"/>
								</td>
								<td>
									<html:select property="destinationType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<th align="right">To:</th>
								<td>
									<input id="searchTextField" type="text" size="50">
								</td>
							</tr>
							<tr><td colspan="3"></td></tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:img src="../../images/icon-tube.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-buses.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-bike.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-walk.gif"/></td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:checkbox property="modes" value="0"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="1" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="2" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="3" disabled="true"></html:checkbox></td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="1">&nbsp;</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right"> <html:submit>Search</html:submit></td>
										</tr>
									</table>
								</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right"><button id="ajaxSearch">AJAX SEARCH</button> </td>
										</tr>
									</table>
								</td>
							</tr>
							
						</tfoot>
					</table>
				</td>
				<td>
					<table  border="1">
						<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
							<c:forEach var="path" items="${searchRouteForm.result.path}" varStatus="status">
								<tr>
									<td><c:out value="${path.name}"></c:out></td>
									<td><c:out value="${path.routeCode}"></c:out></td>
								</tr>
							</c:forEach>
							</c:if>
					</table>
				</td>
				<td>
					<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
						<img alt="Route Map" src='<c:out value="${searchRouteForm.result.map}"/>'>
					</c:if>
				</td>
			</tr>
		</table>
	</html:form>
</div>
<script>	
	$(document).ready(function(){
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#fromStr').val() 
			},
			cache : false,
			success: function( xmlResponse ) {
				var data = $( "stop", xmlResponse ).map(function() {
					return {
						value:$( "name", this ).text(),
						id:$( "id", this ).text()
					};
				}).get();
				$( "input#fromStr" ).autocomplete({
					source: data,
					minLength: 1,
					select: function( event, ui ) {
						$("#from").val(ui.item.id);
					},
					noCache: true
				});
			}
		});
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#toStr').val() 
			},
			cache : false,
			success: function( xmlResponse ) {
				var data = $( "stop", xmlResponse ).map(function() {
					return {
						value:$( "name", this ).text(),
						id:$( "id", this ).text()
					};
				}).get();
				$( "input#toStr" ).autocomplete({
					source: data,
					minLength: 1,
					select: function( event, ui ) {
						$("#to").val(ui.item.id);
					},
					noCache: true
				});
			}
		});
		$.ajax({
			type: "GET",
			url: "http://localhost:8888/jsp/route/test.xml",
			dataType: "xml",
			data : {
				location:'-33.8670522,151.1957362',
				radius: '500',
				types:'food',
				name: 'harbour',
				sensor: false,
				key: 'AIzaSyAtbF4soZgPbYJU3UYhOB4vCs5p6VPTEZY'
			},
			cache : false,
			success: function( xmlResponse ) {
				alert(xmlResponse);
				var data = $( "result", xmlResponse ).map(function() {
					return {
						value:$( "name", this ).text(),
						id:$( "name", this ).text()
					};
				}).get();
				$( "input#city" ).autocomplete({
					source: data,
					minLength: 1,
					select: function( event, ui ) {
						alert(ui.item.name);
					},
					noCache: true
				});
			},
			failure: function(xmlResponse) {
				alert("XML File could not be found"+xmlResponse);
			}
		});
	});      
</script>